import { useDispatch, useSelector } from 'react-redux'
import { clearCompleted } from '../store/actions/todo'

export default function TodoFooter() {
  const dispatch = useDispatch()
  const { todo } = useSelector((state) => state)
  const handleClearCompleted = () => dispatch(clearCompleted())
  // 已完成的数量大于 0 才显示 clear completed 按钮
  const completedLength = todo.filter((item) => item.done).length
  return (
    <>
      {todo.length > 0 && (
        <footer className='footer'>
          <span className='todo-count'>
            <strong>0</strong> item left
          </span>
          <ul className='filters'>
            <li>
              <a className='selected' href='#/'>
                All
              </a>
            </li>
            <li>
              <a href='#/active'>Active</a>
            </li>
            <li>
              <a href='#/completed'>Completed</a>
            </li>
          </ul>
          {completedLength > 0 && (
            <button className='clear-completed' onClick={handleClearCompleted}>
              Clear completed
            </button>
          )}
        </footer>
      )}
    </>
  )
}
